<template>
	<view class="index-container" :class="userType">
		<!-- 自定义导航栏 -->
		<!-- <u-navbar :class="userType" :is-back="false" title="首页" :border-bottom="false" placeholder leftIcon=" ">
		</u-navbar> -->
		<view class="top-fake-nav" :class="userType">
			<top-menu></top-menu>
		</view>


		<!-- 居民/非居民切换 -->
		<user-segment v-model="userType" @change="handleUserTypeChange"></user-segment>

		<!-- 信息卡片 -->
		<view class="info-card-wrapper">
			<info-card :type="userType" :is-empty="!!!currentCardInfo" :data="currentCardInfo"></info-card>
			<!-- 切换按钮组 -->
			<view class="info-card-switch" v-if="filteredBuildingList.length > 1">
				<view class="switch-btn prev" @click="handlePrev" :class="{ disabled: currentIndex === 0 }">
					<u-icon name="arrow-left" color="#666" size="14"></u-icon>
					<text>上一个</text>
				</view>
				<view class="switch-dots">
					<view 
						v-for="(item, index) in filteredBuildingList" 
						:key="index"
						class="dot"
						:class="{ active: currentIndex === index }"
					></view>
				</view>
				<view class="switch-btn next" @click="handleNext" :class="{ disabled: currentIndex === filteredBuildingList.length - 1 }">
					<text>下一个</text>
					<u-icon name="arrow-right" color="#666" size="14"></u-icon>
				</view>
			</view>
		</view>

		<!-- 中间菜单栏 -->
		<middle-menu :menu-list="middleMenuList" @click="handleMiddleMenuClick"></middle-menu>

		<!-- 精选活动 -->
		<activity-section @more="goToActivityPage"></activity-section>

		<!-- 特色服务 -->
		<view class="section-title">特色服务</view>
		<service-section></service-section>

		<!-- tabbar -->
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
import TopMenu from './components/top-menu.vue'
import UserSegment from './components/user-segment.vue'
import InfoCard from './components/info-card.vue'
import MiddleMenu from './components/middle-menu.vue'
import ActivitySection from './components/activity-section.vue'
import ServiceSection from './components/service-section.vue'
import { USER_TYPE } from './type.js'

export default {
	components: {
		TopMenu,
		UserSegment,
		InfoCard,
		MiddleMenu,
		ActivitySection,
		ServiceSection
	},
	data() {
		return {
			userType: USER_TYPE.RESIDENT,
			currentIndex: 0,
			middleMenuList: [
				{ title: '热表信息', icon: '/static/home/rb_black.png', path: '/pages/subPackageHome/device-list/index' },
				{ title: '阀门信息', icon: '/static/home/fm_black.png', path: '/pages/subPackageHome/device-list/index' },
				{ title: '申请办理', icon: '/static/home/person_black.png', path: '/pages/subPackageHome/apply/index' },
				{ title: '故障报修', icon: '/static/home/service_black.png', path: '/pages/subPackageHome/repair/index' },
			],

			enterpriseInfo: {
				hasData: false,
				data: {
					balance: '65.50',
					date: '2025-03-23 07:22:12',
					lastUsage: '550.00',
					lastFee: '275.00',
					yearUsage: '550.00',
					yearFee: '275.00'
				}
			},
			allBuildingList: []
		}
	},
	computed: {
		// 根据用户类型筛选
		filteredBuildingList() {
			return this.allBuildingList.filter(item => 
				this.userType === USER_TYPE.RESIDENT ? item.priceType == 1 : item.priceType != 1
			)
		},
		// 当前显示的卡片信息
		currentCardInfo() {
			return this.filteredBuildingList[this.currentIndex] || null
		},
		// 导航栏背景色
		navBackground() {
			return this.userType === USER_TYPE.RESIDENT ? 'var(--resident-theme-color)' : 'var(--enterprise-theme-color)'
		}
	},
	watch: {
		// 监听用户类型变化，重置索引
		userType() {
			this.currentIndex = 0
		}
	},
	onLoad() {
		this.getCardInfoFromServer()
	},
	methods: {
		// 从服务器获取卡片信息
		getCardInfoFromServer() {
			this.$utils.showLoading('获取信息中...')
			this.$services.homeService.getUserBuildingInfo().then(res => {
				this.$utils.hideLoading()
				this.allBuildingList = res.data || []
			}).catch(() => {
				this.$utils.hideLoading()
			})
		},
		// 切换用户类型
		handleUserTypeChange(type) {
			console.log('用户类型切换为:', type)
		},

		// 点击中间菜单
		handleMiddleMenuClick(item) {
			console.log('点击中间菜单:', item)
			uni.navigateTo({ url: item.path })
		},

		// 查看更多活动
		goToActivityPage() {
			uni.navigateTo({ url: '/pages/activity/index' })
		},



		// 处理上一个按钮点击
		handlePrev() {
			if (this.currentIndex > 0) {
				this.currentIndex--
			}
		},

		// 处理下一个按钮点击
		handleNext() {
			if (this.currentIndex < this.filteredBuildingList.length - 1) {
				this.currentIndex++
			}
		},

		// tabbar切换前钩子
		beforeTabSwitch({ from, to }) {
			return true
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.index-container {
	// min-height: 100vh;
	// padding-bottom: 120rpx;
}

.top-fake-nav {
	width: 100vw;
	margin-bottom: 0;

	&.resident {
		background-color: $resident-theme-color;
	}

	&.enterprise {
		background-color: $enterprise-theme-color;
	}
}

.info-card-wrapper {
	position: relative;
	margin-bottom: 30rpx;
	
	.info-card-switch {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		margin-top: 20rpx;
		
		.switch-btn {
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			background-color: #f5f5f5;
			transition: all 0.3s ease;
			
			text {
				font-size: 24rpx;
				color: #666;
				margin: 0 10rpx;
			}
			
			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}
			
			&:active {
				background-color: #e8e8e8;
			}
		}
		
		.switch-dots {
			display: flex;
			align-items: center;
			gap: 12rpx;
			
			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background-color: #ddd;
				transition: all 0.3s ease;
				
				&.active {
					width: 24rpx;
					border-radius: 6rpx;
					background-color: #666;
				}
			}
		}
	}
}

.section-title {
	font-size: 30rpx;
	color: #333;
	padding: 0 30rpx;
	margin-bottom: 20rpx;
}
</style>
